<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="navBar">
      <navigator class="topback"
                 hover-class="none"
                 url="/pages/index/index"
                 open-type="switchTab">
        <image class="back_icon"
               src="../../static/image/ico_dh_bk@2x.png"></image>
      </navigator>
      <view class="list">
        <view @click="type=1"
              class="item"
              :class="{active:type==1}">笔试</view>
        <view @click="type=2"
              class="item"
              :class="{active:type==2}">面试</view>
        <view @click="type=3"
              class="item"
              :class="{active:type==3}">助攻</view>
        <view @click="type=4"
              class="item"
              :class="{active:type==4}">职场</view>
      </view>
      <view class="top_sousuo">
        <image class="ss_icon"
               src="../../static/image/ico_ss@2x.png"></image>
      </view>
    </view>

    <!-- 排序区域 -->
    <view class="solt_bar">
      <view class="item"
            @click="toggleSort('timeShow')">
        <view class="top_title">发布时间</view>
        <image v-if="!timeShow"
               class="top_image"
               src="../../static/image/kqfx_ico_xl@2x.png"></image>
        <image v-if="timeShow"
               class="top_image"
               src="../../static/image/kqfx_ico_sl@2x.png"></image>
      </view>
      <view class="item"
            @click="hangye=!hangye">
        <view class="top_title">行业分类</view>
        <image v-if="!hangye"
               class="top_image"
               src="../../static/image/kqfx_ico_xl@2x.png"></image>
        <image v-if="hangye"
               class="top_image"
               src="../../static/image/kqfx_ico_sl@2x.png"></image>
      </view>
      <view class="item"
            @click="toggleSort('priceShow')">
        <view class="top_title">价格</view>
        <image v-if="!priceShow"
               class="top_image"
               src="../../static/image/kqfx_ico_xl@2x.png"></image>
        <image v-if="priceShow"
               class="top_image"
               src="../../static/image/kqfx_ico_sl@2x.png"></image>
      </view>
    </view>

    <!-- 发布时间model -->
    <sortModel v-if="timeShow"
               :dataList="timeSortList"
               @selectChange="selectModel"></sortModel>
    <!-- 价格model -->
    <sortModel v-if="priceShow"
               :dataList="priceList"
               @selectChange="priceChange"></sortModel>

    <!-- 行业分类的model -->
    <hangyeModel v-show="hangye"
                 @changeArr="getArr"
                 :queryParms="queryParms"> </hangyeModel>
    <!-- 商品显示列表 -->
    <goodslist :dataList="goodsList">
      <template v-slot:title>
        {{type==1?'':type==2?'面试':type==3?'助攻':'职场'}}
      </template>
      <template v-if="type==4"
                v-slot:time="item">
        {{item.item.createtime}}
      </template>
    </goodslist>
  </view>
</template>

<script>
import { timeSortList, priceList } from './data'
import sortModel from '../../components/sortModel'
import hangyeModel from '../../components/hangyeModel'
import goodslist from './goodslist'
export default {
  components: {
    sortModel,
    hangyeModel,
    goodslist
  },
  data() {
    return {
      queryParms: { type: 1, class_id: '', price_min: 0, price_max: 0, order: 1 },
      goodsList: [],
      timeShow: false,
      hangye: false,
      priceShow: false,
      timeSortList,
      priceList,
      type: 1
    }
  },
  onLoad() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      let { data } = await this.$http.post('/Curriculum/index', this.queryParms)
      this.goodsList = data.data
    },
    selectModel(item) {
      this.queryParms.order = item.order
      this.getGoodsList()
      setTimeout(() => {
        this.timeShow = false
      }, 200)
    },
    priceChange(item) {
      this.queryParms.price_min = item.price_min
      this.queryParms.price_max = item.price_max
      this.getGoodsList()
      setTimeout(() => {
        this.priceShow = false
      }, 200)
    },
    toggleSort(name) {
      this[name != 'timeShow' ? 'timeShow' : ''] = false
      this[name != 'priceShow' ? 'priceShow' : ''] = false
      this[name != 'hangye' ? 'hangye' : ''] = false
      this[name] = !this[name]
    },
    // 助攻
    async zhug() {
      let { data } = await this.$http.post('/assists/index', this.queryParms)
      this.goodsList = data.data
    },
    // 职场
    async zc() {
      let { data } = await this.$http.post('/workplace_news/index')
      this.goodsList = data.data
    },
    async getArr(e) {
      this.queryParms.class_id = e.toString()
      let { data } = await this.$http.post('/Curriculum/index', this.queryParms)
      this.goodsList = data.data
      this.hangye = false
    }
  },
  watch: {
    type(value) {
      if (value != 3 && value != 4) {
        this.queryParms.type = value
        this.getGoodsList()
      }
      if (value == 3) {
        this.queryParms.type = value
        this.zhug()
      }
      if (value == 4) {
        this.zc()
      }
    }
  }
}
</script>

<style lang="scss">
/* 商品显示列表 */

/* 弹窗的遮罩层 */

/* 弹窗的遮罩层 */
.t {
  .mask {
    position: fixed;
    top: 190rpx;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;

    /* 发布时间model */
    .common_model {
      width: 750rpx;
      overflow: hidden;
      position: absolute;
      z-index: 999;
      top: 0rpx;
      background-color: #fff;

      .item {
        width: 750rpx;
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .active {
        font-weight: bold;
        &::after {
          content: '';
          width: 26rpx;
          height: 18rpx;
          background: url('/static/img/钩选.png') no-repeat 0 0 / 100% 100%;
        }
      }
    }
  }
}

/* 排序区域 */
.solt_bar {
  background-color: #fff;
  width: 750rpx;
  height: 70rpx;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;

    .top_image {
      width: 16rpx;
      height: 10rpx;
      margin-left: 6rpx;
    }
  }
}

/* 顶部导航 */
.navBar {
  height: 100rpx;
  width: 750rpx;
  overflow: hidden;
  background-color: #fff;
  display: flex;

  .topback,
  .top_sousuo {
    width: 90rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .back_icon {
      width: 20rpx;
      height: 36rpx;
    }
    .ss_icon {
      width: 28rpx;
      height: 30rpx;
    }
  }

  .list {
    flex-grow: 1;
    display: flex;
    align-items: center;

    .item {
      font-size: 32rpx;
      flex-grow: 1;
      text-align: center;
    }

    .active {
      font-weight: 900;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: 72rpx;
        height: 3rpx;
        background-color: #ffdd47;
        left: 50%;
        transform: translateX(-50%);
        bottom: -13rpx;
      }
    }
  }
}
</style>